<template>
  <div class="public-app">
    <el-button
      type="primary"
      size="14"
      class="create-app-btn"
      @click="handleCreateApp(allNull ? 'create' : 'edit')">{{ allNull ? '创建App' : '编辑App' }}</el-button>
    <createAppDialog ref="createApp" :apply-data="applyData" @query-app="queryApp"></createAppDialog>
    <div v-if="!allNull" class="app-wrap">
      <div class="apply-name">应用名称：{{ applyData.appName }}</div>
      <div class="app-box">
        <div class="modules package-name">
          <div>Android 应用包名：{{ applyData.androidAppName }}</div>
          <div>iOS 应用包名：{{ applyData.iosAppName }}</div>
        </div>
        <div class="modules identify-wrap">
          <div class="copy-box">
            <span>AppID：</span>
            <span
              id="copyAndroidId"
              :title="applyData.androidAppId"
              class="identifying">{{ applyData.androidAppId }}</span>
            <i class="iconfont icon-copy" style="font-size: 24px;" @click="copyText('copyAndroidId')"></i>
          </div>
          <div class="copy-box">
            <span>AppID：</span>
            <span
              id="copyIOSId"
              :title="applyData.iosAppId"
              class="identifying">{{ applyData.iosAppId }}</span>
            <i class="iconfont icon-copy" style="font-size: 24px;" @click="copyText('copyIOSId')"></i>
          </div>
        </div>
        <div class="modules identify-wrap">
          <div class="copy-box">
            <span>Appkey：</span>
            <span
              id="copyAndroidKey"
              :title="applyData.androidAppKey"
              class="identifying">{{ applyData.androidAppKey }}</span>
            <i class="iconfont icon-copy" style="font-size: 24px;" @click="copyText('copyAndroidKey')"></i>
          </div>
          <div>
            <span>Appkey：</span>
            <span
              id="copyIOSKey"
              :title="applyData.iosAppKey"
              class="identifying">{{ applyData.iosAppKey }}</span>
            <i class="iconfont icon-copy" style="font-size: 24px;" @click="copyText('copyIOSKey')"></i>
          </div>
        </div>
      </div>
    </div>
    <tableList v-if="!allNull" ref="tableList" :apply-data="applyData" @custom-event="handleVersion"></tableList>
    <addOrEditVersion
      ref="addVersion"
      :apply-data="applyData"
      :active-name="activeName"
      :version-add-or-edit="versionAddOrEdit"
      :version-row="versionRow">
    </addOrEditVersion>
  </div>
</template>
<script>
import createAppDialog from './component/createOrEditApp.vue'
import tableList from './component/tableList.vue'
import addOrEditVersion from './component/addOrEditVersion.vue'
import ClipboardJS from 'clipboard'
import { fetchApp, deleteApp } from '@/api/app/myapp'
export default {
  name: 'PublicApp',
  components: { createAppDialog, tableList, addOrEditVersion },
  data() {
    return {
      activeName: '',
      versionAddOrEdit: '', // 创建/编辑状态
      applyData: { // app应用数据
        appName: '',
        androidAppName: '',
        androidAppId: '',
        androidAppKey: '',
        iosAppName: '',
        iosAppId: '',
        iosAppKey: ''
      },
      versionRow: {} // 版本列表单条数据
    }
  },
  computed: {
    // 判断app是否有数据，属性全为null未创建
    allNull() {
      return Object.values(this.applyData).every(val => val === null)
    }
  },
  created() {
    this.queryApp()
  },
  methods: {
    // 获取app数据
    queryApp() {
      const params = {
        appInfoId: 2312
      }
      fetchApp(params).then(res => {
        this.applyData = res.data.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 删除app
    deleteApp() {
      deleteApp().then(res => {
        this.$message.success('删除成功')
        this.queryApp()
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 创建/编辑App
    handleCreateApp() {
      this.$refs.createApp.dialogVisible = true
    },
    // 新增/编辑版本
    handleVersion(row, key, activeName) {
      this.activeName = activeName
      this.versionAddOrEdit = key
      this.versionRow = row
      this.$refs.addVersion.dialogVisible = true
    },
    // 复制方法
    copyText(copyId) {
      const text = document.getElementById(copyId).textContent
      const clipboard = new ClipboardJS(event.target, {
        text: () => text
      })
      clipboard.on('success', () => {
        clipboard.destroy() // 销毁 clipboard 实例
      })
      clipboard.on('error', () => {
        clipboard.destroy() // 销毁 clipboard 实例
      })
      clipboard.onClick(event) // 触发复制操作
      this.$message.success('已复制')
    }
  }
}
</script>
<style lang="scss" scoped>
.public-app {
  padding: 20px;

  .create-app-btn {
    margin-top: 42px;
    margin-left: 12px;
    float: right;
  }

  .app-wrap {
    .apply-name {
      font-size: 18px;
      font-weight: 400;
      color: #252525;
      height: 25px;
      line-height: 25px;
    }
    .app-box {
      margin-top: 15px;
      margin-bottom: 25px;
      display: flex;
      flex-wrap: nowrap;

      .modules {
        div {
          height: 48px;
          line-height: 48px;
          display: flex;
          align-items: center;
          padding: 0 17px;
          background: #F5F6F7;
          margin-right: 1px;
          margin-bottom: 1px;
          font-size: 16px;
          font-weight: 400;
          color: #808080;
        &.copy-box {
          padding: 0 17px;
          display: flex;
          align-items: center;
        }

          .identifying {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .iconfont {
            cursor: pointer;
            margin-left: 4px;
          }
        }
      }

      .package-name {
        flex: 0 0 auto;
      }

      .identify-wrap {
        overflow: hidden;
      }
    }
  }
}
</style>
